<template>
  <div class="app-container home">
    <query-panel
      :form-data="queryParams"
      @handleQuery="handleQuery"
      label-width="100px"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="流程名称：" prop="processName">
            <el-input v-model="queryParams.processName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="编号：" prop="processCode" label-width="60px">
            <el-input v-model="queryParams.processCode" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流程状态：" prop="processDeployStatus">
            <el-select
              v-model="queryParams.processDeployStatus"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in processData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/wf-process-def/list"
      :queryParams="queryParams"
      :columns="columns"
      :operateArray="operateArray"
      @onOperate="onOperate"
    >
      <template slot="tableTop">
        <el-button
          class="tableAdd"
          type="primary"
          plain
          size="mini"
          @click="onAdd"
          ><svg-icon icon-class="add_icon" style="width: 18px; height: 16px" />
          新增</el-button
        >
      </template>
      <template #processKey="{ row }">
        <el-button @click="handleDetails(row)" class="open-details">
          {{ row.processKey }}
        </el-button>
      </template>
      <template #processDeployStatus="{ row }">
        <span
          :style="{
            color: row.processDeployStatus === 1 ? '#FF6522' : '#2BA22B',
          }"
          >{{
            row.processDeployStatus === 1
              ? "已保存"
              : row.processDeployStatus === 2
              ? "已发布"
              : ""
          }}</span
        >
      </template>
      <template #operate="{ row }">
        <el-button
          size="mini"
          type="text"
          class="ordinary-btn"
          @click="onOperate('编辑', row)"
          :disabled="row.processDeployStatus == 2"
          ><svg-icon
            icon-class="table-column-edit"
            style="width: 16px; height: 16px"
          />
          编辑
        </el-button>
        <el-button
          size="mini"
          type="text"
          class="ordinary-btn"
          @click="onOperate('发布', row)"
          ><svg-icon
            icon-class="table-column-release"
            style="width: 16px; height: 16px"
          />
          发布
        </el-button>
        <el-button
          size="mini"
          type="text"
          class="ordinary-btn"
          @click="onOperate('删除', row)"
          ><svg-icon
            icon-class="table-column-delete"
            style="width: 16px; height: 16px"
          />
          删除
        </el-button>
      </template>
    </table-panel>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import {
  createProcessId,
  deleteProcess,
  deployProcess,
} from "@/api/approvalManage/processManage.js";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "nodeIndex",
  components: {
    TablePanel,
    QueryPanel,
  },
  data() {
    return {
      queryParams: {
        processName: "",
        processCode: "",
        processDeployStatus: "",
      },
      processData: [
        {
          value: "1",
          label: "已保存",
        },
        {
          value: "2",
          label: "已发布",
        },
      ],
      operateArray: [
        {
          name: "发布",
          icon: "table-column-release",
        },
        {
          name: "删除",
          icon: "table-column-delete",
        },
      ],
      columns: [
        {
          field: "processKey",
          label: "流程编号",
          slots: { default: "processKey" },
        },
        {
          field: "name",
          label: "流程名称",
        },
        {
          field: "processDeployStatus",
          label: "流程状态",
          slots: { default: "processDeployStatus" },
        },
        {
          field: "userName",
          label: "操作人",
        },
        {
          label: "操作",
          type: "custom",
          width: "300px",
          slots: { default: "operate" },
        },
      ],
    };
  },

  methods: {
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    // 新增
    onAdd() {
      createProcessId().then((res) => {
        this.$router.push({
          path: "/approvalManage/add-process",
          query: { data: res.data.id, processKey: res.data.processKey },
        });
      });
    },
    // 操作
    onOperate(type, row) {
      if (type === "删除") {
        this.$confirm("确认删除吗？").then(() => {
          deleteProcess({ ids: row.id }).then((res) => {
            this.$message.success("操作成功！");
            this.$refs.tablePanel.getTable();
          });
        });
      } else if(type === "发布") {
        this.$confirm("确认发布吗？").then(() => {
          deployProcess({ procDefId: row.id }).then((res) => {
            this.$message.success("操作成功！");
            this.$refs.tablePanel.getTable();
          });
        });
      } else {
        this.$router.push({
        path: "/approvalManage/add-process",
        query: { data: JSON.stringify(row), type: 'edit' },
      });
      }
    },
    // 打开详情
    handleDetails(row) {
      this.$router.push({
        path: "/approvalManage/add-process",
        query: { data: JSON.stringify(row), type: 'details' },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.cell {
  span {
    font-size: 16px;
    font-weight: 400;
  }
  .ordinary-btn {
    width: 80px;
    height: 32px;
    border: 1px solid #dcdcdc;
    font-size: 16px;
    span {
      color: #333333e6;
    }
  }
}
.open-details{
  border: none;
  color: #333333a6;
  &:hover{
    color: #333333a6;
  }
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell .open-details{
  background-color: #F5F7FA;
}
</style>
